import React, {
    Component,
} from 'react';
import {
    Text,
    View,
    TouchableWithoutFeedback
} from 'react-native';
import { connect } from 'react-redux';

import { SETUSERINFO, logout } from '../../actions/reglogin';

import ConfirmDialog from '../../components/confirm/index';

import styles from './css/settings';

class SettingsScreen extends Component {
    static navigationOptions = {
        title: "设置",
    };

    constructor(props){
        super(props);
        this.state = {
            modalVisibility: false
        }
    }

    _logout(){
        logout();
        this.setState({modalVisibility:false});
        this.props.dispatch({
            type: SETUSERINFO,
            uid: 0,
            token: "",
            avatar: "",
            nick: "",
            sex: 0
        });
        this.props.navigation.navigate('Reglogin', {transition: 'pop'})
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.block}>
                    <TouchableWithoutFeedback
                        onPress={() => this.setState({modalVisibility: true}) }
                    >
                        <View style={styles.item}>
                            <Text style={[styles.label, styles.logouttxt]}>退出登录</Text>
                        </View>
                    </TouchableWithoutFeedback>
                </View>

                <ConfirmDialog title="" message="确定要退出登录吗？" visibility={this.state.modalVisibility}
                    buttonLeftName="取消" buttonRightName="确定"
                    onLeftPress={()=>{
                        this.setState({modalVisibility:false})
                    }}

                    onRightPress={() => this._logout()}
                />
            </View>
        )
    }
}

function mapStateToProps(state) {
    return {
    }
  }
  
  export default connect(mapStateToProps)(SettingsScreen);